<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile - DateBox Demos</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
	<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
	<link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" /> 
	
	<!-- NOTE: Script load order is significant! -->
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
	<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
	<!--script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script-->
	<script type="text/javascript" src="http://dev.jtsage.com/jQM-DateBox2/js/jqm-datebox.core.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
	
	<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
	<script type="text/javascript" src="../extras.js"></script>
	<script type="text/javascript" src="http://dev.jtsage.com/gpretty/prettify.js"></script>
	<link type="text/css" href="http://dev.jtsage.com/gpretty/prettify.css" rel="stylesheet" />
	<script type="text/javascript">
		$('div').live('pagecreate', function() {
			prettyPrint()
		});
	</script>
	
</head>
<body>
<div data-role="page" id="calLimit"> 
	<div data-role="header" data-position="fixed"> 
		<h1>jQueryMobile - DateBox</h1>
		<a href="../../" data-icon="home" data-iconpos="notext">Home</a>
	</div>
	<div data-role="content">
		<div class="content-secondary"> 
			<div id="jqm-homeheader"> 
				<h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework :: DateBox" /></h1> 
				<p>A Date and Time Picker plugin for jQueryMobile</p> 
			</div> 
			
			<div class="optdemos sidebar"></div>
		</div>
		
		<div class="content-primary"> 
			<div data-role="collapsible-set" data-mini="true">
			
				<div data-role="collapsible" data-collapsed="false">
					<h2>Forced Popup Mode</h2>
					<p>You can force the dialog mode off with 'dialogEnable' set to 'false' (this is the default!!)</p>
					
					<div data-role="fieldcontain">
						<label for="forcepop">Some Date</label><input name="forcepop" type="date" data-role="datebox" id="forcepop" data-options='{"mode": "calbox"}' />
					</div>
				
					<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode": "calbox"}'&gt;</pre>
				</div>
				<div data-role="collapsible" data-collapsed="true">
					<h2>Built-In Popup Mode</h2>
					<p>You can use jQM's builtin popup plugin as well.  Set 'enablePopup' to true.</p>
					<p>Other related options are 'popupForceX' and 'popupForceY' which, when used together can force the absolute position of the opened popup.  'popupPosition' can be left false, and the popup will center over the associated input element, or set to 'window', and it will be centered in the window (with scroll position intact).</p>
					
					<div data-role="fieldcontain">
						<label for="newpop">Some Date</label><input name="newpop" type="date" data-role="datebox" id="newpop" data-options='{"mode": "calbox", "enablePopup": true}' />
					</div>
				
					<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode": "calbox", "enablePopup": true}'&gt;</pre>
				</div>
				<div data-role="collapsible">
					<h2>Forced Dialog Mode</h2>
					<p>You can force the dialog mode on with 'dialogForce' set to 'true'</p>
					
					<div data-role="fieldcontain">
						<label for="forcediag">Some Date</label><input name="forcediag" type="date" data-role="datebox" id="forcediag" data-options='{"mode": "calbox", "dialogForce": true}' />
					</div>
				
					<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode": "calbox", "dialogForce": true}'&gt;</pre>
				</div>
				<div data-role="collapsible">
					<h2>Centered Mode</h2>
					<p>You can force DateBox to display centered horizontaly on the page with 'centerHoriz' set to 'true'.</p>
					
					<div data-role="fieldcontain">
						<label for="centerhdisp">Some Date</label><input name="centerhdisp" type="date" data-role="datebox" id="centerhdisp" data-options='{"mode":"calbox", "centerHoriz": true}' />
					</div>
				
					<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"calbox", "centerHoriz": true}'&gt;</pre>
   
					<p>You can force DateBox to display centered horizontaly on the page with 'centerVert' set to 'true'.</p>
					
					<div data-role="fieldcontain">
						<label for="centervdisp">Some Date</label><input name="centervdisp" type="date" data-role="datebox" id="centervdisp" data-options='{"mode":"calbox", "centerVert": true}' />
					</div>
				
					<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"calbox", "centerVert": true}'&gt;</pre>
				</div>
				<div data-role="collapsible">
					<h2>Inline Mode</h2>
					<p>You can force DateBox to display inline with 'useInline' set to 'true'.  Also shown with 'useImmediate', which will update the input every time a change is made to the control, and 'useSetButton' set to false to hide the set button.</p>
				
					<div data-role="fieldcontain">
						<label for="forceinline">Some Date</label><input name="forceinline" type="date" data-role="datebox" id="forceinline" data-options='{"mode":"datebox", "useInline": true, "useImmediate":true, "useSetButton":false}' />
					</div>
				
					<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"datebox", "useSetButton":false, "useInline": true, "useImmediate":true}'&gt;</pre>
				</div>
				<div data-role="collapsible">
					<h2>Inline Blind Mode</h2>
					<p>DateBox also has a rolldown "blind" mode - this example combines the focus mode, blind rollout, and auto-updates.</p>
					
				
					<div data-role="fieldcontain">
						<label for="inlineblind">Some Date</label><input name="inlineblind" type="date" data-role="datebox" id="inlineblind" data-options='{"mode":"datebox", "useImmediate":true, "useButton": false, "useFocus": true, "useInlineBlind": true}' />
					</div>
				
					<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"datebox", "useImmediate":true, "useButton": false, "useFocus": true, "useInlineBlind": true}'&gt;</pre>
				</div>
				<div data-role="collapsible">
					<h2>Inline w/o Input</h2>
					<p>You can force DateBox to display inline (without the input hiding) with 'useInline' and 'hideInput' set to 'true'.</p>
					<p>Choosen Date: <span class="inlinedateout"></span></p>
					
					<div data-role="fieldcontain">
						<label for="useInlineHideInput">Some Date</label><input name="useInlineHideInput" type="date" data-role="datebox" id="useInlineHideInput" data-options='{"mode":"datebox", "useInline": true, "hideInput": true, "useSetButton":false, "useImmediate":true}' />
					</div>
					<script type="text/javascript">
						$('#useInlineHideInput').bind('change', function(e,p) {
							$('.inlinedateout').text($(this).val());
						});
					</script>
				
					<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;

&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
   data-options='{"mode":"datebox", "useInline": true, "hideInput": true, "useSetButton":false, "useImmediate":tr}'&gt;</pre>
				</div>
			</div>
		</div> 
	</div>
	<div data-role="footer" data-position="fixed">
	</div>
</div>
</html>
